import  React,{PropsWithChildren,ReactElement} from "react";
import {Todo} from '@/models'
import { withDefaultInputProps,DefaultProps } from '@/utils';

interface OwnProps {
    addTodo:(todo:Todo)=>void
}
type Props = OwnProps & DefaultProps;
interface State {
    text:string
}
let id = 0
 class TodoInput extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
          text: "",
        };
    }
    handleChange= (event:React.ChangeEvent<HTMLInputElement>)=>{
        this.setState({
            text:event.target.value
        })
    }
    handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        let text = this.state.text.trim();
        if (!text)return;
        
        this.props.addTodo({id:id++,text});
        this.setState({ text: "" });
      }
    public render(){
        const { text } = this.state;
        const { setting } = this.props as (Props & Required<DefaultProps>);
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" value={text} maxLength={setting.maxLength} placeholder={setting.placeholder} onChange={this.handleChange} />
                <button type="submit">添加</button>
            </form>
        )
    }
}
export default withDefaultInputProps<Props>(TodoInput)